<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片库示例</title>
</head>
<body>
<h1>Snapshots：这个示例可用于电子书的在线浏览</h1>
<ul>
	<li><a href="images/IMG_20120410_183943.jpg" class = "pic" title="A firewoks display">Fireworks</a></li>
	<li><a href="images/IMG_20120418_154212.jpg" class = "pic" title="A cup of black coffee">Coffee</a></li>
	<li><a href="images/IMG_20120528_140902.jpg" class = "pic" title="A red rose">Rose</a></li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery"/>
<p id="description">请选择图片</p>
//下面是调用JavaScript打开新窗口的伪协议示例
<a href="javascript:popUp('http://yanenglish.test/web');">伪协议调用JavaScript示例</a>
<script type="text/javascript">
    window.onload = prepareLinks();	//这一行指定在浏览器加载网页后执行，当window对象触发onload事件时,document对象已经存在，这样为了确保脚本正常工作，在文档加载完之前有可能无法访问其中的对象

	function prepareLinks() {
        var links = document.getElementsByTagName('a');
        for(var i = 0; i < links.length; i++) {

            if(links[i].getAttribute('class') == 'pic') {
                links[i].onclick = function () {
                    showPicture(this);		//在这儿也可以直接用this

                    return false;	//注意此处的返回值，与直接加在a节点中一样，防止在新页面打开链接
                }
            }
        }
    }

    function showPicture(whichPic) {
        //取得图片节点链接
        var source = whichPic.getAttribute('href');
        //取得待显示图片的占位符节点
        var placeholder = document.getElementById('placeholder');
        //修改占位符节点的图片链接
        placeholder.setAttribute('src', source);        //也可以不声明placeholder变量，直接用以下的非DOM方式直接引用元素来修改值，这样浏览器兼容性好点，但是使用DOM的好处是可以用于多种语言环境。	placeholder.src = source;

        var text = whichPic.getAttribute('title');
        var description = document.getElementById('description');
        description.firstChild.nodeValue = text;

    }

	function popUp(URL) {
        window.open(URL, 'popup', 'width=320, height=480');
	}

</script>
</body>
</html>